<template>

	<div class="container">
	
		
		<input type="text" v-model="name" @change="" >
		<div>	
		
				{{name}}
		</div>
		
		<input type="radio" value="1" v-model="gender"  > 男
		<input type="radio" value="2" v-model="gender" >女
		
		
		
		
		<h3>表单</h3>
		<input type="text" v-model="form.name">
		
		
	</div>
	
	
</template>

<script>
	
	
	export default{
		name:'MyMethod',
		data(){
			return {
				name:'',
				gender:1,
				
				
				form:{
					name:'jshand'
				}
			}
		},
		watch:{
			name(newVal,oldVal){
				console.log("name,oldV:"+oldVal+"    newValue:"+newVal)
			},
			gender(newVal,oldVal){
				console.log("gender,oldV:"+oldVal+"    newValue:"+newVal)
			},
			
			"form.name":{
				deep:true,
				handler(newVal,oldVal){
					console.log("form.name,oldV:"+oldVal+"    newValue:"+newVal)	
				}
			}
		}
		
	}
	
	
</script>

<style scoped>
	
	/**  v --> viewport */
	.container{
		margin: 50px;
		background-color: azure;
		width: 100vw;
		height: 100vh;
	}
	
	
</style>